<template>
    <div>
        <jsscom-heard />
        <div class="cons">
            <div class="pu-con">
                <!-- <div class="con-title">
                    <p>当前位置：</p>
                    <router-link to>首页</router-link>
                    <p>/</p>
                    <p>{{leftTitle}}</p>
                    <p>/</p>
                    <p>{{leftTitle1}}</p>
                </div> -->
                <div class="gy-cons">
                    <gy-com-left
                        @onLeftTab="onLeftTab"
                        :leftTitle="leftTitle"
                        :navList="navList"
                        :curIndex="curIndex"
                    />
                    <div class="gy-r">
                        <div class="gy-r-1">
                            <p>{{ leftTitle1 }}</p>
                        </div>
                        <xiehui-right v-if="curIndex == 0" />
                        <zhangc-right v-if="curIndex == 1" />
                        <zuzhi-right v-if="curIndex == 2" />
                        <zilv-right v-if="curIndex == 4" />
                        <difang-right v-if="curIndex == 5" />
                        <banshi-right v-if="curIndex == 3" />
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import _ from "underscore";
import jsscomHeard from "@/components/jsscom-heard";
import comFoot from "@/components/com-foot";
import gyComLeft from "@/components/gy-com-left";
import xiehuiRight from "./xiehui-right";
import zhangcRight from "./zhangc-right";
import zuzhiRight from "./zuzhi-right";
import zilvRight from "./zilv-right";
import difangRight from "./difang-right";
import fenzhiRight from "./fenzhi-right";
import banshiRight from "./banshi-right";
export default {
    components: {
        jsscomHeard,
        comFoot,
        gyComLeft,
        xiehuiRight,
        zhangcRight,
        zuzhiRight,
        zilvRight,
        difangRight,
        fenzhiRight,
        banshiRight,
    },
    data() {
        return {
            leftTitle: "关于广协",
            path: "/jsgg/guanyuxh",
            topTitle: "",
            leftTitle1: "",
            curIndex: 0,
            navList: [
                {
                    id: 0,
                    title: "协会简介",
                },
                {
                    id: 1,
                    title: "协会章程",
                },
                {
                    id: 2,
                    title: "组织架构",
                },
                {
                    id: 3,
                    title: "办事机构",
                },
                {
                    id: 4,
                    title: "自律规则",
                },
                {
                    id: 5,
                    title: "地方协会",
                },
            ],
        };
    },
    created() {},
    mounted() {},
    methods: {
        onLeftTab(index) {
            this.curIndex = index;
            let data = _.find(this.navList, (p) => {
                return p.id == this.curIndex;
            });
            this.leftTitle1 = data.title;
        },
    },
    watch: {
        $route: {
            handler: function(route) {
                const query = route.query;
                this.curIndex = parseInt(query.type) || 0;
                let data = _.find(this.navList, (p) => {
                    return p.id == this.curIndex;
                });
                this.leftTitle1 = data.title;
            },
            immediate: true,
        },
    },
};
</script>

<style scoped>
@import "./guanyuxiehui.css";
</style>
